
<title>我的客户</title>

<link rel="stylesheet" href="/statics/public/vendor/datatables-bootstrap/dataTables.bootstrap.css">
<link rel="stylesheet" href="/statics/public/css/examples/components/basic/modals.css">

<link rel="stylesheet" href="/statics/public/vendor/magnific-popup/magnific-popup.css">
<link rel="stylesheet" href="/statics/public/css/examples/components/advanced/lightbox.css">

<div class="page animation-fade page-index">
    <div class="page-content">
        <div class="panel" style="height: 100%;">
            <div class="panel-body">
                <div class="col-md-12 form-group" style="margin-bottom: 10px">
                    <button type="button" href="create/0/" data-toggle="modal" data-target="#exampleTabs" class="btn btn-success pull-left" id="add_button">
                        <i class="icon fa-plus" aria-hidden="true"></i> 添加
                    </button>
                </div>
                <table class="table table-bordered table-hover dataTable table-striped width-full text-nowrap" id="dataTable">
                    <thead>
                    <tr>
                        <th>用户ID</th>
                        <th>编号</th>
                        <th>客户名称</th>
                        <th>状态</th>
                        <th>记录</th>
                        <th>创建时间</th>
                        <th>最后修改时间</th>
                        <th>备注</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

{# 模态对话框 #}
<div class="modal fade" id="modal" aria-hidden="true" aria-labelledby="examplePositionCenter" role="dialog" tabindex="-1" style="display: none; z-index: 1050">
    <div class="modal-dialog modal-top">
        <div class="modal-content">
        </div>
    </div>
</div>

{# 模态对话框 #}
<div class="modal fade" id="modal2" aria-hidden="true" aria-labelledby="examplePositionCenter" role="dialog" tabindex="-1" style="display: none; z-index: 1051">
    <div class="modal-dialog modal-top" style="width: 700px;">
        <div class="modal-content" style="margin-top: -50px;">
        </div>
    </div>
</div>

<div class="modal fade" id="exampleTabs" aria-hidden="true" aria-labelledby="exampleModalTabs" role="dialog" tabindex="-1" style="display: none;">
    <div class="modal-dialog" style="width: 700px;">
        <div class="modal-content">

        </div>
    </div>
</div>


<div class="modal fade" id="exampleTabs1" aria-hidden="true" aria-labelledby="exampleModalTabs" role="dialog" tabindex="-1" style="display: none;">
    <div class="modal-dialog" style="width: 1000px;">
        <div class="modal-content">

        </div>
    </div>
</div>

{# 右侧显示用户信息模态对话框 #}
<div class="modal fade" id="examplePositionSidebar" aria-hidden="true" aria-labelledby="examplePositionSidebar" role="dialog" tabindex="-1" style="display: none; z-index: 1041;">
    <div class="modal-dialog modal-sidebar modal-sm" style="justify-content: flex-start;">
        <div class="modal-content">

        </div>
    </div>
</div>


<script src="/statics/public/vendor/magnific-popup/jquery.magnific-popup.min.js" data-name="popup"></script>
<script src="/statics/public/js/examples/components/advanced/lightbox.js" data-deps="popup"></script>

<script src="/statics/public/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="/statics/public/vendor/datatables-bootstrap/dataTables.bootstrap.min.js"></script>
<script src="/statics/public/js/examples/tables/data-tables/api/row-details.js"></script>

<script>

    var table = $('#dataTable').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "每页显示 _MENU_ 条",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "第 _START_ 至 _END_ 项，共 _TOTAL_ 项",
            "sInfoEmpty": "第 0 至 0 项，共 0 项",
            "sInfoFiltered": "",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        "processing": true,
        "destroy": true,
        "serverSide": true,  // 服务器模式
        "ajax": "?type=ajax_json", // ajax 取数据
        "aaSorting": [
            [5, "desc"]
        ], // 默认排序
        "columns": [
            {
                "data": "id",
                "orderable": false,  // 禁止排序
                "visible": false,       // 不可见
                "searchable": false     // 不可搜索
            },
            {
                "data": "number",
                "orderable": false,  // 禁止排序
                "searchable": false     // 不可搜索
            },
            {
                "data": "client_name"
            },
            {
                "data": "status",
{#                    "searchable": false     // 不可搜索#}
            },
            {
                "data": "img",
                "orderable": false,  // 禁止排序
{#                    "searchable": false     // 不可搜索#}
            },
            {
                "data": "create_date"
            },
            {
                "data": "update_date"
            },
            {
                "data": "remark"
            }
        ]
    });

    table.on( 'draw', function () {
        $('.popup-with-css-anim').magnificPopup({type:'image'});
    } );

    function aClick(e) {
        e.stopPropagation();     // 通过该命令阻止事件冒泡
    }

    // 点击表格中的员工信息展示右侧模态对话框
    $(".dataTable tbody").on('click', 'tr', function () {
        var user_id = table.row($(this)).data().id;
        $("#examplePositionSidebar .modal-content").empty();


        var url = "select/" + user_id + '/';

        $.get(url, function (data) {
            $("#examplePositionSidebar .modal-content").html(data);
            $("#examplePositionSidebar").modal('show');
        });
    });


</script>
